<template>
    <h3>供货商列表</h3>
    <el-table :data="publishers" style="width: 100%">
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="name" label="供应商" width="480" />
        <el-table-column prop="phone" label="电话" width="200" />
        <el-table-column prop="email" label="电子邮箱" width="300"/>
        <el-table-column label="操作" width="200">
            <template #default="scope">
                <div>
                    <el-button type="primary" plain @click="toBooksByX(scope.row.id,scope.row.name)">查看供应的全部图书</el-button>
                 </div>
            </template>
        </el-table-column>
    </el-table>
    <!-- <table>
        <tr v-for="p in publishers" :key="p.id">
            <td width="60px">{{ p.id }}</td>
            <td width="200px">{{ p.name }}</td>
            <td width="200px">{{ p.phone }}</td>
            <td>{{ p.email }}</td>
            <td width="200px"><a @click.prevent="toBooksByX(p.id)" href="#">all books</a></td>
        </tr>
    </table> -->
</template>
<script  setup>
import {ref,reactive,onMounted} from "vue"
import { useRouter, useRoute } from 'vue-router'
import axios from '../axios'

const router = useRouter()

const publishers=reactive([]);
onMounted(async ()=>{
    const resp= await axios.get("/api/publishers")
    publishers.push(...resp.data)
})

function toBooksByX(id,name){
    router.push({path:'booksByX/'+id,query:{publisher:name}})
}
</script>